<!-- 活动台账-审核通过/不通过 -->
<template>
	<view class="modal-to-void" v-if="visible" @touchmove.stop.prevent>
		<view class="modal-con">
			<view class="con-title"><text>是否审核通过</text></view>
			<view class="con-check">
				<view :class="'check-item'+(index==checkStatus?' cur':'')" v-for="(checkItem,index) in checkList"
					:key="index" @click="checkStatus=index"><text>{{checkItem}}</text></view>
			</view>
			<view class="check-reason" v-show="checkStatus==0">
				<textarea class="textarea" v-model="checkReason" placeholder="请输入不通过原因" />
			</view>
			<view class="btn-box">
				<view class="btn cancel" @click="cancel"><text>取消</text></view>
				<view class="btn ok" @click="ok"><text>确认</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkReason: "",
				checkList: ['不通过', '通过'],
				checkStatus: 0,
			}
		},
		props: {
			data: {
				type: Object,
				default () {
					return {}
				}
			},
			visible: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			ok() {
				const formData = {
					checkStatus: this.checkStatus,
					checkReason: ''
				}
				if (this.checkStatus == 0) {
					if (!this.checkReason) {
						uni.showToast({
							title: '请输入' + this.checkList[0] + '原因',
							icon: 'none'
						})
						return false;
					} else {
						formData.checkReason = this.checkReason;
					}
				}
				// 告诉父级我点击了确定
				this.$emit('confirm', formData);
				// 关掉弹框
				this.cancel();
			},
			cancel() {
				this.$emit('update:visible', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-to-void {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: block;
		box-sizing: border-box;
		background: rgba(0, 0, 0, .5);

		.modal-con {
			position: absolute;
			width: 80%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			border-radius: 3px;
			text-align: center;

			.con-title {
				padding: 1em 1.6em .3em;
				margin-bottom: 20rpx;
				font-size: 36rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.con-check {
				text-align: center;

				.check-item {
					font-size: 32rpx;
					display: inline-block;
					line-height: 2em;
					padding: 0 0.5em;
					border-radius: .2em;
					border: 1px solid $app-color;
					color: $app-color;
					margin: 0 1em;

					&.cur {
						background-color: $app-color;
						color: #FFFFFF;
					}
				}
			}

			.check-reason {
				text-align: left;
				margin: 30rpx 60rpx 0;

				.textarea {
					width: 100%;
					border: 1rpx solid #eee;
					border-radius: 10rpx;
					padding: 0.5em 1em;
					line-height: 1.5em;
					height: 6em;
					box-sizing: border-box;
				}
			}

			.btn-box {
				padding: 40rpx 0;


				.btn {
					display: inline-block;
					border-radius: 2.5em;
					line-height: 2.5em;
					padding: 0 2em;
					border: 4rpx solid #666;
					color: #666;
					margin: 0 0.5em;
				}

				.ok {
					border-color: $app-color;
					color: $app-color;
				}
			}
		}
	}
</style>
